<template>
    <div class="header">
        <div class="boxs" v-if="!searchshow">
            <ul class="header-ul1 ul1">
                <li class="li1">
                    <img src="../assets/img/中国.png" alt="" class="china">
                    CN/CNY
                </li>
                <li @click="langisshow=true">{{$t('langs.lang')}}</li>
                <li>{{$t('langs.service')}}</li>
                <li><span class="iconfont icon-htmal5icon04" style="font-size: 12px margin-right: 2px;"></span>{{tel}}</li>
            </ul>
            <div class="logo" @click="toRouter(0)"><img src="../assets/img/logo-03.png" alt=""></div>
            <ul class="header-ul1 ul2">
                <li @click="toRouter(1)">{{login}}</li>
                <li><span class="iconfont icon-xin1" style="font-size: 20px;"></span></li>
                <li><span class="iconfont icon-gouwudai3" style="margin-right: 9px;font-size: 20px;"  @click="toRouter('/shoppingbag')"></span>{{$t('langs.shopping')}}</li>
                <li style="padding-right:0;"><span class="iconfont icon-sousuo" style="font-size: 20px;" @click="searchisshow(true)"></span></li>
            </ul>
        </div>
        <div class="search" v-if="searchshow">
            <div>
                <span class="iconfont icon-sousuo1"></span>
                <input type="text" placeholder="女士" v-on:keydown.enter="fn2($event)" v-model="search">
                <span class="iconfont icon-guanbi1" @click="searchisshow(false)"></span>
            </div>
        </div>

        <div class="language" v-if="langisshow">
            <div>
                <span class="iconfont icon-guanbi" @click="langisshow=false"></span>
                <div class="headline">{{$t('langs.choose')}}</div>
                <div class="tips">{{$t('langs.option')}}</div>
                <div :class="langitem==0?'switching switching-color': 'switching'" @click="getlangitem('cn',0)"><span>简体中文</span></div>
                <div :class="langitem==1?'switching switching-color': 'switching'" @click="getlangitem('en',1)"><span>English</span></div>
                <div :class="langitem==2?'switching switching-color': 'switching'" @click="getlangitem('ja',2)"><span>日本語</span></div>
                <div :class="langitem==3?'switching switching-color': 'switching'" @click="getlangitem('ko',3)"><span>한국어</span></div>
            </div>
        </div>
    </div>
</template>

<script>
import {getStaticId} from '@/common/request.js'
export default {
    name: 'header',
    data() {
        return {
            searchshow: false,
            langitem: 0,
            langisshow: false,
            search: null,
            login: '登录',
            torouters: '/login',
            tel: ''//客服电话
        }
    },
    created() {
        this.getgetStaticId()
        let i = this.$cookies.get('loginid')
        this.langitem = localStorage.getItem('langId')||0
        if( i == 1) {//判断是登陆没有
            this.login = this.$t('langs.personal')
            this.torouters = '/personalcenter'
        } else {
            this.login = this.$t('langs.login')
            this.torouters = '/login'
        }
    },
    methods: {
        getgetStaticId() {//客服电话
            getStaticId({
                keyId:109
            }).then(res=>{
                if(res.code==0) {
                    this.tel = res.result.keyValue
                }
                
            })
        },
        getlangitem(la,i) {//语言切换
            localStorage.setItem('langId',i)
            localStorage.setItem('langs',la)
            this.$i18n.locale = localStorage.getItem('langs')
            this.langisshow = false       
            this.$router.go(0);
        },
        searchisshow(page) {
            this.searchshow = page
        },
        toRouter(i) {
            if(i==1) {
                this.$router.push({ 
                    path: this.torouters
                })
            }else {
                this.$router.push({ 
                    path: '/'
                })
            }
            
        },
        fn2(e) {//搜索
            console.log(this.search)
            console.log(e)
            this.searchshow = false
            this.search = ''
            this.$router.push({
                path: '/productlist'
            })
        }
    },
}
</script>

<style lang="scss">
.header {
    width: 100%;
    height: 78px;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    >.boxs {
        width: 1308px;
        height: 78px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        ul {
            color: #fff;
        }
        .header-ul1 {
            overflow: hidden;
            li {
                float: left;
                font-size: 12px;
                padding: 0 15px;
                line-height: 78px;
                .china {
                    width: 20px;
                    height: 14px;
                    margin-right: 10px;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    margin-top: -7px;
                    
                }
            }
            li:hover {
                cursor: pointer;
            }
            .li1 {
                padding-left: 30px;
                position: relative;
            }
        }

        .ul1 {
            float: left;
        }
        .ul2 {
            float: right;
        }
        .logo {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -67.5px;
            margin-top: -15px;
            cursor: pointer;
            >img{
                width: 135px;
                height: 30px;
            }
        }
    }
    .search {
        width: 100%;
        background: #313131;
        >div {
            width: 1171px;
            margin: 0 auto;
            position: relative;
            >span:nth-child(1) {
                font-size: 28px;
                color: #827F77;
                line-height: 78px;
            }
            >span:nth-last-child(1){
                font-size: 32px;
                color: #827F77;
                line-height: 78px;
                position: absolute;
                right: 0;
            }
            >input {
                width: 1063px;
                padding: 3px;
                background: #313131;
                font-size: 14px;
                color: #D2D2D2;
                border: none;
                outline:none;
                position: absolute;
                top: 50%;
                left: 48px;
                margin-top: -11px;
            }
            input::placeholder {
                color: #D2D2D2;
                font-size: 14px;
            }
        }
       
    }
}
.language {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    >div {
        width: 978px;
        height: 392px;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -489px;
        margin-top: -196px;
        text-align: center;
        >span {
            position: absolute;
            font-size: 22px;
            right: 15px;
            top: 15px;
            color: #ccc;
            cursor: pointer;
        }
        >.headline {
            font-size: 26px;
            color: #101010;
            font-weight: 600;
            padding-top: 34px;
        }
        >.tips {
            // width: 200px;'
            display: inline-block;
            padding: 0 14px;
            height: 34px;
            background: #bbb;
            line-height: 34px;
            margin-top: 12px;
            margin-bottom: 22px;
        }
        >.switching {
            font-size: 16px;
            color: #9d9d9d;
            line-height: 30px;
            >span {
                cursor: pointer;
            }
        }
    }
}
.switching-color {
    color: #101010 !important;
}
</style>